import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { TagData } from "../../../../entity/tag-data.model";
import { Farm } from "../../../../entity/farm.model";
import { FarmService } from "../../../../service/farm.service";
import { DatePipe } from "@angular/common";

@Component({
	selector: 'app-wind-power-echart',
	templateUrl: './wind-power-echart.component.html',
	styleUrls: ['./wind-power-echart.component.css']
})
export class WindPowerEchartComponent implements OnInit {

	/**
     * 风场名字
     * 
     * @memberof FarmEchartsComponent
     */
	@Input()
	name: string;

	//搜索时间
	@Input()
	time: Date;

	/**
     * 昨日风速、昨日功率数据集合
     * 
     * @memberof FarmEchartsComponent
     */
	@Input()
	yesterdayWindSpeedDatas: any[];

	@Input()
	yesterdayPowerDatas: any[];

	/**
	 * echarts实例对象
	 * 
	 * @private
	 * @type {*}
	 * @memberof WindPowerEchartComponent
	 */
	private echartsIntance: any;

	//风速功率数据集合
	private yesterdayWindSpeedSeries: any[] = [];
	private yesterdayPowerSeries: any[] = [];

	public options: object;
	public serchTime:Date;
	constructor(
		private datePipe: DatePipe) { }

	ngOnInit() {
		this.initOption();
	}

	ngOnChanges(changes: SimpleChanges) {
		
		if (changes['yesterdayWindSpeedDatas'] && changes['yesterdayWindSpeedDatas'].currentValue) {		
			
			this.yesterdayWindSpeedSeries.splice(0,this.yesterdayWindSpeedSeries.length,...changes['yesterdayWindSpeedDatas'].currentValue)			
			// this.yesterdayWindSpeedSeries.push(...changes['yesterdayWindSpeedDatas'].currentValue);
		}

		if (changes['yesterdayPowerDatas'] && changes['yesterdayPowerDatas'].currentValue){
			this.yesterdayPowerSeries.splice(0,this.yesterdayPowerSeries.length,...changes['yesterdayPowerDatas'].currentValue)
			// this.yesterdayPowerSeries.push(...changes['yesterdayPowerDatas'].currentValue);
		}
		if (changes['time'] && changes['time'].currentValue){
			this.serchTime = this.time;
			this.initOption()
		
		
		}
		
		this.updateEchart();
		
	}

	private series: any = [
		{
			name: '风速',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			// xAxisIndex: 1,
			yAxisIndex: 1,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			itemStyle: {
				normal: {
					color: '#e9d937',
					borderColor: 'rgba(137,189,2,0.27)',
					borderWidth: 12

				}
			},
			data: this.yesterdayWindSpeedSeries = this.yesterdayWindSpeedSeries ? this.yesterdayWindSpeedSeries : []      // 用初始化ngOnInit的数据集合代替       
		},
		{
			name: '功率',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 5,
			showSymbol: false,
			// xAxisIndex: 1,
			lineStyle: {
				normal: {
					width: 1
				}
			},
			itemStyle: {
				normal: {
					color: 'rgb(0,136,212)',
					borderColor: 'rgba(0,136,212,0.2)',
					borderWidth: 12

				}
			},
			data: this.yesterdayPowerSeries = this.yesterdayPowerSeries ? this.yesterdayPowerSeries : [] 
		},
	]

	private legend = {
		icon: 'rect',
		itemWidth: 14,
		itemHeight: 5,
		itemGap: 3,
		data: ['风速', '功率'],
		right: '20%',
		textStyle: {
			fontSize: 12,
			color: '#F1F1F3',
		},
		show:false
	}

	initOption() {

		let pipe = this.datePipe;
		// let serchTime = this.time;
		this.options = {
			title:{
				text:this.name,
				textStyle:{
					color:"#ffffff",
					fontSize: 16,
					align:'center',
					
				},
				left:'center'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						color: '#57617B'
					}
				},
				formatter: function (params, ticket, callback) {
					let result = pipe.transform(new Date(params[0].data[0]), "HH:mm:ss") + "</br>";
					params.forEach((item) => {
						result += item.marker + item.seriesName + ":" + item.value[1] + "</br>";
					});
					return result;
				}
			},
			legend: this.legend,
			grid: {
				left: '3%',
				right: '2%',
				bottom: '10%',
				top: '15%',
				containLabel: true
			},
			xAxis: [
				{
					type: 'time',
					min: new Date(this.serchTime.getFullYear(), this.serchTime.getMonth(), this.serchTime.getDate()),
					max: new Date(this.serchTime.getFullYear(), this.serchTime.getMonth(), this.serchTime.getDate() + 1),
					interval: 60000 * 60,
					boundaryGap: false,
					axisLine: {
						lineStyle: {
							color: '#35789d',
							width: 2
						}
					},
					axisLabel: {
						// 该属性的用来定义坐标轴的标签;
						formatter: function (value, index) {
							return pipe.transform(new Date(value), "HH");
						},
						rotate: 30
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#1b4268'
						}
					},
					axisTick: {
						show: false
					},
				},
				
			],
			yAxis: [
				{
					type: 'value',
					// name: '功率：KW',
					axisLabel: {
						//也可以像X轴那样定义想要的显示效果
						formatter: "{value}"
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#1b4268'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#35789d',
							width: 2
						}
					},
					axisTick: {
						show: false
					}
				},
				{
					type: 'value',
					// name: '风速：m/s',
					axisLabel: {
						//也可以像X轴那样定义想要的显示效果
						formatter: "{value}"
					},
					// max: 25,
					// min: 0,
					splitLine: {
						show: true,
						lineStyle: {
							color: '#1b4268'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#35789d',
							width: 2
						}
					},
					axisTick: {
						show: false
					}
				}
			],
			series: this.series
		};
	}


	//初始化图表实例
	onChartInit(ec: any) {
		this.echartsIntance = ec;
		this.updateEchart();
	}

	//更新图表数据
	updateEchart() {
		if (this.echartsIntance != null) {
			this.echartsIntance.setOption(this.options);
			// console.log(this.options);
		}
	}

}



// WEBPACK FOOTER //
// ./src/app/module/performance/wind-power-compare/wind-power-echart/wind-power-echart.component.ts